<!--
 * @Description: 通讯录
 * @Author: Kerwin
 * @Date: 2024-08-27 10:33:08
 * @LastEditTime: 2025-04-17 15:53:29
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="container">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
            @scrolltolower="lower" @scroll="scroll">
            <view class="group">
                <!-- <view class="titleList">群组</view> -->

                <view v-for="(item, index) in headerIcon" :key="index" @click="handleGrpup(item)" class="iconItem">
                    <van-badge v-if="newFriend.length > 0 && item.type == 'friend'"
                        :content="newFriend.length > 0 ? newFriend.length : ''">
                        <van-icon class="gicon" size="66rpx" :name="item.icon"
                            :style="{ backgroundColor: item.bgColor }" />
                    </van-badge>
                    <van-icon v-else class="gicon" size="66rpx" :name="item.icon"
                        :style="{ backgroundColor: item.bgColor }" />
                    <view class="titleGicon">{{ item.title }}</view>
                </view>

                <!-- <view @click="handleGrpup" class="iconItem">
                    <van-icon class="gicon" size="66rpx" name="friends" />
                    <view class="titleGicon">群组</view>
                </view> -->
            </view>
            <view class="list">
                <view class="titleList">我的联系人</view>
                <c_index_list :custom-style="{ color: '#333' }" active-color="#333" :scrollTop="scrollTop"
                    :sticky="true" :indexList="letterArr" :offset-top="0.01" @select="onAnchorSelect">
                    <view v-for="(item, index) in list" :key="index">
                        <u-index-anchor :use-slot="true" :index="item.letter">
                            <view class="u-m-l-10">{{ item.letter }}</view>
                        </u-index-anchor>
                        <view class="list-wrap u-border-bottom" v-for="(item1, index) in item.data" :key="index"
                            v-show="!item1.hide">
                            <view class="body-item" @click="toChat(item1)">
                                <u-image width="100" height="100" border-radius="8" :loading-icon="avatar_def"
                                    :error-icon="avatar_def" :src="item1?.avatar ? getImgFullPath(item1?.avatar) : avatar_def
                                        " :lazy-load="false" :fade="false" mode="aspectFill"></u-image>
                                <view class="content">
                                    <view class="title">
                                        <view>{{ item1?.name }}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </c_index_list>
                <u-empty v-if="!list.length" text="暂无好友，快去添加吧~" margin-top="160"></u-empty>
            </view>
        </scroll-view>

    </view>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app';
import { Md5 } from 'ts-md5'
import pinyin from 'js-pinyin'
import { route } from '@/utils/common'
import { useChatStore, useUserStore } from '@/store'
import { socialApi, userApi } from '@/api'
import { getImgFullPath } from '@/utils'
import avatar_def from '../../static/img/avatar_default.svg'
import c_index_list from './c_index_list.vue'
import { ConversationType } from '@rongcloud/imlib-next';

const userStore = useUserStore()
const scrollTop = ref(0)
const circleInfo = reactive({
    friendCircleId: '',
    chatGroupId: ''
})
const list = ref<{}[]>([])
const newFriend = ref([])
const letterArr = computed(() => {
    return list.value.map((item) => item.letter)
})
const headerIcon = ref([
    {
        title: '新的朋友',
        icon: 'manager-o',
        bgColor: '#8484f3',
        type: 'friend'
    },
    {
        title: '群组',
        icon: 'friends',
        bgColor: '#09c160',
        type: 'group'
    },
])

function isChineseOrLetter(char) {
    const regex = /^[\u4e00-\u9fa5a-zA-Z]+$/
    return regex.test(char)
}
// 获取好友列表
async function getFriendList() {
    const { data } = await socialApi.getFriendList({
        userId: userStore?.userInfo?.id,
        detail: true,
        noPaging: true,
    })

    console.log('data好友列表', data);


    if (!data || !data.length) return
    const temp = data.map((item: { userDetail: { id: string; name: string; avatar: string; username: string } }) => {
        const fs = item.userDetail.name ? item.userDetail.name.substr(0, 1) : item.userDetail.username.substr(0, 1)
        const ff = isChineseOrLetter(fs) ?
            pinyin.getFullChars(fs).toUpperCase().substr(0, 1) :
            'fs' // 首字
        return {
            letter: ff,
            user: item.userDetail
        }
    })
    const dataInfo: { [key: string]: { letter: string; data: any[] } } = {}
    temp.forEach((item: any) => {
        const { letter } = item
        if (!dataInfo[letter]) {
            dataInfo[letter] = {
                letter,
                data: []
            }
        }

        dataInfo[letter].data.push({ ...item.user, checked: false })
    })
    console.log(dataInfo, 111);

    list.value = Object.values(dataInfo) // list 转换成功的数据
    console.log(list.value, 33);
}
//获取群聊
async function getNewFriends() {
    const { data, code } = await socialApi.circleUserApplyList()
    console.log('获取新朋友==》', data);
    if (code !== 200) return newFriend.value = []
    newFriend.value = data
}

//跳转
const handleGrpup = (item: any) => {
    // console.log('跳转', item);
    route({
        url: `/packageD/pages/index/c_chatGroupList?type=${item.type}`,
    })
}





const upper = (e: any) => {
    console.log(e)
}
const lower = (e: any) => {
    console.log(e)
}
const scroll = (e: any) => {
    scrollTop.value = e.detail.scrollTop
}
const onAnchorSelect = (index: number, top: number) => {
    console.log(index, scrollTop)
    scrollTop.value = top
}

const toChat = (data: { user: any, id: number, userId: number }) => {
    const { user } = data
    route({
        url: '/packageD/pages/chat/index',
        params: {
            conversationType: ConversationType.PRIVATE,
            targetId: data.userId,
            userId: data.userId,
        }
    })
}

const newFriendList = async () => {


}
onShow(() => {
    getFriendList()
    getNewFriends()
})


onLoad((option) => {
    console.log('进入通讯录');

    circleInfo.friendCircleId = option?.cid
    circleInfo.chatGroupId = option?.gid
    // getFriendList()
    // getNewFriends()
})
</script>



<style lang="scss" scoped>
.container {
    background: #fff;
    padding-bottom: 300rpx;

    .scroll-Y {
        height: calc(100vh - 110rpx);
    }

    .list {
        flex: 1;
    }
}

.list-wrap {
    padding: 18rpx 30rpx;

    .body-item {
        display: flex;
        height: auto;
        width: 100%;
        color: #333;
        align-items: center;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20rpx;

            .title {
                display: flex;
                padding-top: 10rpx;
                font-size: 28rpx;
                line-height: 40rpx;
            }
        }
    }
}

.body-item .images {
    width: 73rpx;
    height: 73rpx;
}

.bottom-wrap {
    height: 150rpx;

    .bottom {
        z-index: 1000;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f4f4f5;
        margin-bottom: env(safe-area-inset-bottom);
        padding: 20rpx 30rpx;

        .button {
            width: 100%;
            height: 70rpx;
            box-sizing: border;
        }
    }
}

//标题
.titleList {
    width: 100%;
    height: 46rpx;
    padding: 7rpx 30rpx;
    background: #f2f2f2;
}

//群聊天
.group {
    margin-top: 20rpx;
    margin-bottom: 60rpx;
    width: 100%;

    .gicon {
        text-align: center;
        // background-color: #09c160;
        color: #fff;
        width: 85rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10%;
        // margin-top: 10rpx;
        margin-right: 30rpx;
    }

    .titleGicon {

        width: 90%;
        line-height: 80rpx;
        height: 80rpx;
        border-bottom: 3rpx solid #f2f2f2;

    }

    .iconItem {
        padding: 0 30rpx;
        width: 500rpx;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 30rpx 0;

    }
}
</style>